/* 1.文字(字体)样式 */
.new{
    /* 设置字体 */
    font-family:"楷体110",'微软雅黑';
    /* 字体风格 */
    font-style: oblique;
    /* 字体大小 */
    font-size: 50px;
    /* 字体颜色 */
    color: pink;
    /* 字体加粗 */
    font-weight: bold;
    /* 小型大写字母 */
    font-variant: small-caps;
    
}

/* 文本样式 */
.now{
    /* height: 50px;
    width: 100px; */
    /* background-color: red; */

    /* 文本对齐方式  left center right*/
    text-align: left;
    /* 行高 
    特殊应用 在父元素中的子元素 设置行高为父元素高度可以设置垂直居中
    */
    line-height: 50px;
    /* 划线 none  去下划线*/
    /* text-decoration: line-through red dashed; */
/* 
    text-decoration-line:line-through;
    text-decoration-color:red;
    text-decoration-style:dashed; */

    /* 字符间距 */
    /* letter-spacing:50px; */
    /* 空白处理 当内容超过容器是是否换行 */
    /* white-space:nowrap; */

    /* 阴影  */
    /* text-shadow:1px 1px 2px red,2px 2px 4px green; */

    /* 文字描边 */
    -webkit-text-stroke: 1px pink;
}

.pic{
    text-transform: uppercase;/* 变大写 */
}
.te{
    text-transform: lowercase;/* 变小写 */
}


.box{
    width: 200px;
    height: 200px;
    /* 背景颜色 */
    /* background-color: red; */
    background: red;
    /* 背景图片会把背景颜色挡住
       背景图片默认情况下显示的是原尺寸 
        -如果容器过小那么只会显示一部分
        -如果容器过大，图片会以平铺的方式显示
    我们可以设置图片的大小
    
    */
    background-image: url(../imgs/a.jpg);
    /* 设置图片大小 */
    background-size: 50px 50px;
    /* 控制图片是否平铺 */
    background-repeat: no-repeat;
    /* 控制图片的位置 具体设置控制位置 */
    /* background-position: 10px 10px; */
    /* 针对需要直接靠某个方向上的操作我们可以使用方向
    上右下左  top right bottom left  center
     */
    background-position: center;

}